<template>
	<view class="template-shop tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :customBack="true" :bottomShadow="false" backgroundColor="#362e7a" class="tn-color-white">
			<template #back>
				<view class="tn-flex tn-flex-col-center" style="height: 100%;width: 100px;">
					<text @click="goBack" style="font-size: 36rpx;" class="tn-icon-left"></text>
					<text class="custom-nav-content" style="font-size: 36rpx;margin-left: 20rpx;">个性装扮</text>
				</view>
			</template>
			<template #right>
				<view class="tn-flex tn-flex-col-center tn-flex-row-right" style="height: 100%;">
					<div class="outside" @click="navigateToFn({ url: '/mineMixinPages/gift/chongzhi', checkLogin: true })">
					<div class="inner">
						<img src="../static/other/goldIcon2.png" alt="" style="width: 44rpx; height: 44rpx; margin-right: 8rpx;">
						<span class="num">{{ money }}</span>
						</div>
					</div>
					<div class="my-outside" style="margin:0 20rpx"  @click="tn('/mineMixinPages/daojubag')">
						<div class="my-inner ">
							<img src="../static/other/clothes.png" alt="" style="width: 44rpx; height: 44rpx; margin-right: 8rpx;">
							<span class="my-span">我的</span>
						</div>
					</div>
				</view>
			</template> 
			<!-- <view slot="back" class='tn-custom-nav-bar__back'>
		<text class='icon tn-icon-left' @click="goBack"></text>
		<text class='icon tn-icon-more-circle' @click="listshow=true"></text>
		</view>			
		<view class="custom-nav-content">
		  <view class="search-content">			  
				我的消息
		  </view>
		</view> -->
		</tn-nav-bar>

		<view class="order--wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="" style="width: 100%;background-color: #362e7a;">
				<tn-tabs :bold="true" activeColor="#24D4D1" :showBar="false" inactiveColor="#fff" ref="tabs" :list="list"
					:current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback"
			:style="'min-height:' + screenHeight + 'px;'">

			<view class="tn-flex tn-flex-wrap tn-margin-left-sm tn-margin-bottom-sm tn-margin-right-sm tn-margin-top-xs"
				:style="{paddingTop: vuex_custom_bar_height+50 + 'px'}">
				<block v-for="(item, index) in content" :key="index">
					<view class="" style="width: 50%;position: relative;" @click="gloumai(item)">
						<view class="tn-blogger-content__wrap" style="background: rgba(0, 0, 0, 0.3);">
							<view style="height: 42rpx;">
								<view class="tn-flex title-tag tn-flex-row-center tn-flex-col-center tn-color-white" v-if="item.is_vip==1">
								<!-- {{ item.title }} -->
								会员专享
							</view>
							</view>
							<view class="tn-flex tn-flex-row-center tn-color-gray--dark" style="font-size: 12px;margin-top: 22rpx;">
								{{ item.body }}
							</view>
							<view class="tn-flex tn-flex-row-center">
								<image :src="item.image" style="width:60%;" mode="widthFix"></image>
							</view>
							<view style="width: 100%; height: 34rpx; font-weight: 500; font-size: 24rpx; margin-bottom: 24rpx;" class="tn-flex tn-flex-row-center tn-flex-col-center tn-color-white">
								{{ item.title }}
							</view>
							<view class="tn-flex tn-flex-row-between tn-margin-bottom-sm">
								<view style="color: #fff;font-size: 24rpx; margin-left: 16rpx; font-weight: 500;">
									{{item.money }}{{configInfo.site_moneyname}}
									<text v-if="item.tian>0">/{{item.tian}}{{item.danwei}}</text>
								</view>
								<!-- <tn-badge backgroundColor="#2DE88D" fontColor="#080808" :translateCenter="true"
									style=" position: absolute;	top:50px;right:10px; width: 60px;"
									v-if="item.is_vip==1">
									VIP专享
								</tn-badge> -->
								<!-- item.type 为未知字段，仅做调试使用, 需后期替换 -->
								<view class="clickBtnCss tn-color-white tn-flex tn-flex-col-center tn-flex-row-center" :style="{background: item.type === 1 ? 'linear-gradient(180deg, #FA5151 0%, #FFC300 100%)' : 'linear-gradient(270deg, #66E0FF 0%, #6EF0DA 100%)'}">
									{{item.type === 1 ? '去使用' : '购买'}}
								</view>
							</view>


						</view>
					</view>
				</block>
			</view>
			<!-- 商家商品 start-->
			<!-- 商品 end-->

		</mescroll-body>
		<!-- <view class="" style="
   position: fixed;
    bottom: 0;
    left: 0;
    right: 0;">
			<view class="tn-flex tn-flex-row-between">
				<view class=" justify-content-item tn-margin tn-text-bold" @click="navigateToFn({ url: '/mineMixinPages/gift/chongzhi', checkLogin: true })">
					我的{{configInfo.site_moneyname}}：{{money}}
				</view>
				<view class="justify-content-item tn-margin tn-text-lg tn-color-grey" @click="tn('/mineMixinPages/daojubag')">
					<tn-button shape="round" backgroundColor="#FFF00D" fontColor="#080808">
						我的背包
					</tn-button>
				</view>
			</view>
		</view> -->

		<tn-modal v-model="show" :title="title" :content="tishi" :button="button" @click="goumaicheck"></tn-modal>
	<tn-modal width="80%" v-model="chongzhiis" backgroundColor="#E4E9EC" padding="30rpx 80rpx" :radius="25"
				title="抱歉.余额不足!" :button="buttonc" :showCloseBtn="false" :maskCloseable="false" :zoom="true"
				:custom="false" @click="clickBtn_shenqing">

			</tn-modal>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	const sysinfo = uni.getSystemInfoSync()
	export default {
		name: 'TemplateGroup',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			MescrollBody
		},


		data() {
			return {
				chongzhiis:false,
				money: 0,
				screenHeight: sysinfo.screenHeight,
				id: 0,
				tabsIndex: 0,
				list: [],
				xiaolei: 0,
				content: [],
				show: false,
				title: '提示',
				tishi: '',
				buttonc: [{
						text: '取消',
						backgroundColor: '#c1c1c1',
						fontColor: '#000000'
					},
					{
						text: '立即充值',
						backgroundColor: '#ffff00',
						fontColor: '#000000'
					}
				],
				button: [{
						text: '取消',
						backgroundColor: '#E6E6E6',
						fontColor: '#000000',
						plain: true,
						shape: 'round'
					},
					{
						text: '确定',
						backgroundColor: '#FFF00D',
						fontColor: '#000000'
					}
				]

			}
		},
		onLoad(option) {
		
			this.info()
		},
		methods: {
			clickBtn_shenqing(res) {
			
				if (res == 1) {
					this.chongzhiis = false
					this.navigateToFn({
						url: '/mineMixinPages/gift/chongzhi',
						checkLogin: true
					})
				} else {
					this.chongzhiis = false
				}
			},
			
			goumaicheck(res) {			
				if (res == 1) {
					this.show = false
				this.goumaddp()				
				} else {
					this.show = false
				}
			},
			
			
			
			
			
			
			gloumai(item){
				
				if (this.money<item.price){
					this.chongzhiis=true
					return
				}
				
				this.id=item.id
				this.show=true
				this.tishi='你购买的是'+item.title
			},
			
			async goumaddp(){
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/gift/goumaipass',
					data: {
						id: that.id						
					}
				});
				
				if (result.statusCode == 200) {
					
					if (result.data.code==200){
						this.msg(result.data.msg)
						this.info()
					}else{
						this.msg(result.data.msg)
					}
				
				}
				else{
				
				}
			},	
						
			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/gift/shopclass',
					data: {
						id: that.id,
						xiaolei: that.xiaolei
					}
				});

				if (result.statusCode == 200) {
					that.list = result.data.data
					that.money = result.data.msg
				}
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			change(index) {
				this.currenttiezi = index
				this.xiaolei = this.list[index].id
				this.mescroll.resetUpScroll()
			},


			/// 列表调用
			downCallback(mescroll) {
				mescroll.endSuccess();
				mescroll.resetUpScroll();
			},
			async upCallback(mescroll) {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/gift/shopList',
					data: {
						id: that.id,
						tabsIndex: that.tabsIndex,
						page: mescroll.num
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						if (mescroll.num == 1) {
							that.content = result.data.data;
						} else {
							that.content = that.content.concat(result.data.data);
						}
						console.log(that.content)
						mescroll.endSuccess(result.data.data.length, result.data.data.length >= mescroll.size);

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},


			tabsChange(index) {
				this.tabsIndex = index
				this.mescroll.resetUpScroll();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.template-shop {}

	.order--wrap {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1999;
		background-color: inherit;
	}


	.swiper {
		&__box {
			flex: 1;
		}

		&__item {
			height: 100%;
		}
	}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 文章内容 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #82B2FF;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 30rpx;
			padding-right: 5rpx;
		}
	}

	.image-year {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-capsule {
		padding: 100rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	.custom-jinbe{
		width: 136rpx;
		height: 60rpx;
		border-radius: 50rpx;
		display: flex;
		background: rgba(216, 216, 216, 0.302);
		border: 1px solid;
		// border-image-source: linear-gradient(180deg, #FA5151 0%, #FFC300 100%);
   /* 渐变 */
    background: rgba(216, 216, 216, 0.302);
    /* 线性渐变：从开始到结束都为白色，这里使用两个，不同的是第一个带content-box */
    /* 原因就是为了能多出一个空间 */
    -webkit-mask: inear-gradient(#fff 0 100%) content-box,
        linear-gradient(#fff 0 100%);
     /* 使用-webkit-mask-composite: xor; 只显示不重合的地方*/
    -webkit-mask-composite: xor;
	}

	.outside{
		width: 136rpx;
		height: 60rpx;
		position: relative;
		background: linear-gradient(180deg, #FA5151 0%, #FFC300 100%); /* 渐变色 */
		border-radius: 50rpx;
	}
	 .inner {
		position: absolute;
		top: 1px; /* 边框宽度 */
		left: 1px; /* 边框宽度 */
		right: 1px; /* 边框宽度 */
		bottom: 1px; /* 边框宽度 */
		background: #66608b;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		.num{
			font-weight: bold;
			background: linear-gradient(180deg, #FA5151 0%, #FFC300 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
		}
	 }

	 .my-outside{
		width: 136rpx;
		height: 60rpx;
		position: relative;
		border-radius: 50rpx;
		background: linear-gradient(270deg, #FF6CCE 0%, #F9A1BA 100%)
	 }
	 .my-inner {
		position: absolute;
		top: 1px; /* 边框宽度 */
		left: 1px; /* 边框宽度 */
		right: 1px; /* 边框宽度 */
		bottom: 1px; /* 边框宽度 */
		background: #66608b;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		.my-span{
			font-weight: bold;
			background: linear-gradient(270deg, #FF6CCE 0%, #F9A1BA 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
		}
	 }

	 .title-tag{
		width: 112rpx;
		height: 100%;
		background: linear-gradient(90deg, #7F50FE 0%, #FFAEF8 67%, #D5B7F8 100%);
		border-radius: 5px 0px 5px 0px;
		font-size: 24rpx;
		font-weight: 500;
	 }

	 .clickBtnCss{
		width: 88rpx;
		height: 42rpx;
		border-radius: 5px 0px 5px 0px;
		font-size: 24rpx;
	 }
	/* 文章内容 end*/
</style>
